0

私はcssの初心者です。メニューとドロップダウン メニューの間に小さなスペースが表示され、ホバー効果が壊れるメニューを作成しました。私を助けてください。ありがとう

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu {
    width: 958px;
    /*margin: 60px auto;*/
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);

    box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}
#menu li {
    float: left;
   /* border-right: 1px solid #222;*/
    box-shadow: 1px 0 0 #444;
    position: relative;
    box-sizing: border-box; 
    width: 20%;
}

#menu a {
    float: left;
       padding: 11px 64px;
    color: #999;
    text-transform: uppercase;

    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}
#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1000000;    
    background: #444;    
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);    

    transition: all .2s ease-in-out;
    width: 100%;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    width:100%;


    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);        
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #111;
}
#menu ul li:first-child > a {
    /*border-radius: 3px 3px 0 0;*/

}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;    
}

#menu ul li:first-child a:hover:after {
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #000; 
    border-bottom-color: transparent;

}

#menu ul li:last-child > a {
    /*border-radius: 0 0 3px 3px*/;
}

ここにhtmlがあります、

<ul id="menu">
    <li><a href="#">About </a></li>
    <li><a href="#">Programmes</a><ul>
        <li><a href="#">Undergraduate</a></li>
        <li><a href="#">Postgraduate</a></li>
    </ul></li>
    <li><a href="#">Academics</a></li>
    <li><a href="#">Research</a></li>
    <li><a href="#">Facilities</a></li>
</ul>
4

1 に答える 1

1

Add: 

ul#menu {margin-top:-5px !important;}

The !important tag takes presence over your other margin settings for #menu ul. Adjust as needed to drop down directly below the parent menu item.

Also, if using Chrome right click any element and 'Inspect Element'. Styling will render live for you and allow you to make changes without editing, saving, uploading CSS files to see effects.

On Firefox, download Firebug for the same tools.

于 2012-10-02T21:20:13.170 に答える