如何在不更改主菜單項寬度的情況下製作下拉菜單？

我想用一個下拉菜單製作一個導航欄。

我創建了導航欄。但是主菜單項的寬度隨着子菜單Item而改變。

如何停止更改主菜單項的寬度。這裏主菜單項是「SCHOOLING」。

我不想改變SCHOOLING的寬度。

改變之前

後的NavBar

<!DOCTYPE html> <html> <head> <title>Navigation</title> <link rel="stylesheet" type="text/css" href="nav.css"> </head> <body> <nav id="navbar" class="bold"> <ul> <li style="border-top-left-radius:10px;border-bottom-left-radius:10px;"><a href="index.html" style="padding-left:21px;">HOME</a></li> <li><a href="subject.html" >SCHOOLING</a> <ul> <li><a href="#">HIGH SCHOOL</a></li> <li><a href="#">HIGHER SECONDARY</a></li> </ul> </li> <li><a href="subject.html">ENGINEERING</a></li> <li><a href="subject.html">UG | PG</a></li> <li><a href="subject.html">SPECIAL CLASSES</a></li> <li><a href="about.html">ABOUT</a></li> <li style="border-right:none;"><a href="contact.html">CONTACT US</a></li> </ul> </nav> </body> </html>
變化

HTML代碼

CSS代碼檢測NavBar

* { 
    margin: 0; 
    padding: 0; 
    font-family: Courier New, monospace; 
    } 

.fleft { 
    float: left; 
    } 
.fright { 
    float: right; 
} 
.clear { 
    clear: both; 
    } 

.bold { 
    font-weight: bold; 
    } 

/* NAV BAR */ 

#navbar { 
    background-color: #333; 
    margin:10px; 
    height: 40px; 
    color: white; 
    border-radius: 10px; 
} 

#navbar ul { 
    list-style: none; 
    overflow: hidden; 

} 

#navbar ul li { 
    float: left; 
    border-right: 2px solid #dede0e; 
    font-size: 1.5em; 

} 
#navbar ul li a { 
    color: white; 
     display: block; 
    text-decoration: none; 
     padding: 6px 10px; 

} 
#navbar ul li:hover { 
     background-color: #000000; 


} 

/* DROP DOWN MENU */ 

#navbar ul ul { 
    display: none; 
    list-style: none; 

    color: blueviolet; 
    background: #a80000; 

} 
#navbar ul ul li { 
    float: none; 
    font-size: 1em; 
    border: none; 
    position: relative; 
    top: 100%; 
    left: 0; 
} 
#navbar ul ul li a { 
    border-right: none; 
    padding: 0 20px; 
} 
#navbar ul li:hover > ul 
{ 
    display: block; 
}

來源

2016-03-01 MaxySpark

您可以通過設置下拉菜單絕對的位置實現這一目標。

#navbar ul ul { 
    display: none; 
    list-style: none; 
    color: blueviolet; 
    background: #a80000; 
    position: absolute; 
}

來源

2016-03-01 17:47:17 Kurzalead

如何在不更改主菜單項寬度的情況下製作下拉菜單？

回答

相關問題