Question

我正在建立我的网站。我对CSS很新，我有2个问题。我设法制作了一个让我满意的下拉菜单。问题是：

1）当鼠标移到盒子里面的第一组链接而不是外面时，我想要白色边缘底栏。我知道有一个命令来实现这一点，但我需要修复我不想要的宽度和高度。

2）我希望第二个ul元素显示为一个包含2列的表，每列的标题都是粗体链接。我无法理解为什么每个链接都有自己的盒子，即使我使用内联。

这是我的HTML：

    <div id="menu">
    <ul>
        <li><a href="#">Ispirazioni</a></li>
        <li><a href="#">Chi Siamo</a>
            <ul>
                <li><a href="#">La Storia</a></li>
                <li><a href="#">Oggi</a></li>

                </ul>
        </li>
        <li><a href="#">Articoli</a>
            <ul>
                <li><a href="#">Articoli in promozione</a></li>
                <li><a href="#">Catalogo ></a></li>
            </ul>
        </li>
        <li><a href="#">Contatti</a></li>
    </ul>

这是我的CSS：

#menu {
clear:both;
width:100%;
height:64px;
text-align: center;
top:40px;                            /* I want the menu bar follow the scroll*/
position:fixed;              /*and it stay 40px from top        */                  
background: rgba(89,89,172,0.7);         /*I want the background is transparent*/               
}

#menu ul li{
    position:relative;         /*I want the menu element is displayed in ROW*/
    display:inline;
}

    #menu ul li a{
        text-decoration:none;
        display:inline-block;    /*menu element is separated by 20px*/
        padding:20px;       
    }

        #menu ul ul{
            display: none;        /*menu is hidden*/
            position:absolute;  /* position depends from the first ul*/             
            margin:0;
            padding:0;
            text-align:left;
        }
                #menu ul ul li{
                    display:inline;  /*my submenu width*/
                    width:300px
                }           


                    #menu ul ul li a{
                        width:300px;
                        padding:2px;
                        font-size:12px;                 
                    }
#menu ul li:hover  ul {
    display: block; 

}           
#menu ul li:hover ul a{
        text-decoration:none;
        background:rgba(89,89,172,0.7);                 
    }
#menu ul li:hover > a{
    color:blue; 
    border-bottom: 10px solid #CCC;  /* border bottom, i want inside*/
            }       
#menu ul li:hover ul a:hover{
        color:blue;
        border-bottom:none;

}

很抱歉，如果我的代码很差，但我刚开始使用CSS。

http://jsfiddle.net/ZjLdK/ 这是一个小提琴，当鼠标悬停在链接外面时出现的白色条形图，我希望它在里面。然后我想要2列可点击链接，而不是每个子链接的框。

背景总是不透明

非常感谢你！

Answer 1

这是你在想的吗？的CSS：

ul {
 position:fixed;
 top:40px;
 text-align: center;
 display: inline;
 margin: 0;
 list-style: none;
 width:100%;
 background: rgba(89,89,172,0.7);}
ul li {
 display: inline-block;
 margin-right: -4px;
 padding:0px;
 position: relative;
 width:20%;
 cursor: pointer;}
ul li:hover {
 background: #555;
 color: #fff;}
ul li ul {
 text-align: left;
 display: inline;
 margin: 0;
 opacity: 0;
 width:700px;
 position:absolute;
 top:100%;
 left:0px;
 visibility: hidden;
 list-style: none;}
ul li ul li { 
 display: inline-block;
 width: 300px;
 position: relative;
 margin:0;
 padding:0;
 background: #fff;
 cursor: pointer;}
 ul li ul li:hover {
 background:rgba(89,89,172,0.7); }
ul li:hover ul {
 opacity: 1;
 visibility: visible;}

HTML：

<ul>
 <li><a href="#">Ispirazioni</a></li>
 <li><a href="#">Chi Siamo</a>
  <ul>
   <li><a href="#">La Storia</a></li>
   <li><a href="#">Oggi</a></li>
  </ul>
 </li>
 <li><a href="#">Articoli</a>
  <ul>
   <li><a href="#">Articoli in promozione</a></li>
   <li><a href="#">Catalogo ></a></li>
  </ul>
 </li>
 <li><a href="#">Contatti</a></li>
</ul>

这是小提琴 http://jsfiddle.net/aNVam/230/

下拉菜单显示2列上的新链接

1 个答案: