Меню навигации - Радиус границы и выпадающее меню

Question

Меню навигации - Радиус границы и выпадающее меню

0

Это моя первая попытка создать раскрывающееся меню, поэтому, пожалуйста, извините за плохое кодирование.

Мне нужен радиус границы 10px, который, похоже, работал только с правой стороны меню навигации. Радиус не был применен к левой стороне. Что мне нужно сделать, чтобы исправить это?

Выпадающее меню также не работает должным образом. В меню есть пробел. Это не позволяет мыши зависеть от ссылок подменю. Похоже, что эта проблема вызвана верхним пределом для nav ul. Мне нужно пространство между верхней частью страницы.

Заранее спасибо.

<!DOCTYPE HTML>

<html>

    <head>
        <title>Simple Drop Down Menu</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style2.css">
    </head>

    <body>

    <div class="wrapper">

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                    </ul>
                </li>
                <li><a href="#">Content Management</a>
                    <ul>
                        <li><a href="#">Joomla</a></li>
                        <li><a href="#">Drupal</a></li>
                        <li><a href="#">WordPress</a></li>
                        <li><a href="#">Concrete 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a>
                    <ul>
                        <li><a href="#">General Enquiries</a></li>
                        <li><a href="#">Ask me a Question</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

    <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    </div>

    </body>

</html>

header, div, footer, aside, nav, article, figure, figcaption {
    display: block;}
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {  
    margin: 0; padding: 0; border: 0; outline: none;} 
.wrapper{
    width: 960px; 
    margin: 0px auto;}
nav{
    height: 38px; 
    font-family: Verdana;
    background-color: #196CE8;
    border-radius: 10px;}
nav ul {
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
    margin-top: 20px} 
nav li {
    float: left;
    border-right: 1px solid #ffffff;
    }
nav li ul {
    display: none;} 
nav li a { 
    display: block; 
    background: #196CE8; 
    padding: 8px 15px;
    text-decoration: none; 
    color: white;} 
nav li a:hover {
    background: #1F3D99;}   
li:hover ul {
    display: block; 
    position: absolute;} 
li:hover li {
    float: none;} 
li:hover a {
    background: #196CE8;} 
li:hover li a:hover {
    background: #1F3D99;} 
.main{
    clear: both;}
p{
    padding-top: 30px;}

user3043645 29 нояб. 2013, в 01:28

Источник

Теги:

html

css

html5

css3

drop-down-menu

1 ответ

Ещё вопросы

Serlite · Accepted Answer · 2013-11-29T00-14-00.000Z

Надеюсь, этот ответ по-прежнему поможет вам.

Как отмечалось в предыдущем ответе, причина, по которой левые углы <nav> не выглядят округлыми, заключается в том, что в навигационных ссылках внутри нее нет закругленных углов, но они имеют фоновый цвет. В результате фон в углах самой левой навигационной линии переполняется из <nav>, покрывая его закругленные углы.

Что касается лишнего пробела, из-за чего выпадающие меню непригодны, это связано с тем, что вы устанавливаете стиль CSS:

nav ul{
    margin-top: 20px;
}

Эта маржа не только затрагивает элементы <ul> которые являются непосредственными дочерними элементами <nav>, но также и все последующие дети, включая выпадающие элементы <ul>, которые отталкивают их и создают большой пробел.

Несомненно, есть несколько способов решить эту проблему, поэтому не стесняйтесь опробовать различные решения. Здесь один из способов, о котором я мог думать, путем изменения пары существующих существующих определений стиля:

nav {
    height: 38px;
    font-family: Verdana;
    background-color: #196CE8;
    border-radius: 10px;
    padding-left:10px;
}

nav li ul {
    margin: 0px;
    display: none;
}

Здесь JSFiddle, чтобы показать вам, чего это добивается. Надеюсь, это то, что вы искали! Если нет, дайте мне знать, и я буду рад помочь дальше. Счастливое кодирование!

Большое вам спасибо за вашу помощь. Я действительно ценю время, которое вы потратили, чтобы помочь мне решить проблему. Вчера я потратил большую часть 4 часов, работая над кодом (поскольку я пытался понять каждую его строку), прежде чем опубликовать свой вопрос здесь.