Question

我正在做一个菜单，其中有四个下拉按钮不起作用。下图显示了它应该如何工作：＆＃34; Bijutaria =（香水+ fios）＆＃34;
＆＃34; Inserir =（香水 =奥梅姆+ MULHER）+ Bijutaria = FiOS的+ pulseiras）＆＃34;

我认为问题出在我的CSS代码中，但我无法弄清问题是什么。

＆＃13;

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px;
}
ul li {
  position: relative;
}
li ul {
  position: absolute;
  left: 120px;
  top: 0;
  display: none;
}
ul li a {
  display: block;
  text-decoration: none;
  color: #E2144A;
  background: #fff;
  padding: 5px;
  border: 1px solid #ccc;
}
li:hover ul {
  display: block;
}

＆＃13;

<ul id="left" class='column'>
  <li><a href="ver.php">Home</a></li>
  <li><a href="#">Bijutaria</a></li>
  <ul>
    <li><a href="pulseiras.php">Pulseiras</a>  </li>
    <li><a href="fios.php">Fios</a>  </li>
  </ul>
  <li><a href="#">Perfumes</a> 
    <ul>
      <li><a href="prfh.php">Homem</a></li>
      <li><a href="prfm.php">Mulher</a></li>
    </ul>
    <li><a href="#">Inserir</a></li>
    <ul>
      <li><a href="#">Perfumes</a></li>
      <ul>
        <li><a href="insrph.php">Homem</a></li>
        <li><a href="insrpm.php">Mulher</a></li>
      </ul>
      <li><a href="#">Bijutaria</a></li>
      <ul>
        <li><a href="insrp.php">Pulseiras</a></li>
        <li><a href="insrf.php">Fios</a></li>
      </ul>
    </ul>
  </li>
</ul>

＆＃13;

Answer 1

我修改了HTML以使其有效。然后我重写了你的CSS，添加了绝对的基础知识来做你想要的弹出窗口：

这是一个正常运作的JSFiddle：https://jsfiddle.net/La068t6d/1/

HTML：

<ul id="left" class='column'>

    <li><a href="ver.php">Home</a></li>
    <li><a href="#">Bijutaria</a>
        <ul>
            <li><a href="pulseiras.php">Pulseiras</a></li>
            <li><a href="fios.php">Fios</a></li>
        </ul>
    </li>

    <li><a href="#">Perfumes</a> 
        <ul>
            <li><a href="prfh.php">Homem</a></li>
            <li><a href="prfm.php">Mulher</a></li>
        </ul>
    </li>

    <li><a href="#">Inserir</a>
        <ul>
            <li><a href="#">Perfumes</a>
                <ul>
                    <li><a href="insrph.php">Homem</a></li>
                    <li><a href="insrpm.php">Mulher</a></li>
                </ul>
            </li>
            <li><a href="#">Bijutaria</a>
                <ul>
                    <li><a href="insrp.php">Pulseiras</a></li>
                    <li><a href="insrf.php">Fios</a></li>
                </ul>
            </li>
        </ul>
    </li>

</ul>

CSS：

ul { list-style-type: none; }
ul,li {
    margin: 0; padding: 0;
}
li {
    position: relative;
    display: block;

    }
    a {
        padding: 5px 8px;
        display: block;
        text-decoration: none;
        border: 1px solid #ccc;
        background-color: #fff;
    }



#left {
    width: 150px;
}
#left > li ul {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    }
    #left li:hover > ul {
        display: block;
    }

Answer 2

在这里，我修复了你的代码，你应该总是在LI周围有一个UL而不是在LI里面的UL或LI里面的LI

＆＃13;

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px;
}
ul li {
  position: relative;
}
li ul {
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
}
ul li a {
  display: block;
  text-decoration: none;
  color: #E2144A;
  background: #fff;
  padding: 5px;
  border: 1px solid #ccc;
}
li:hover > ul {
  display: block;
  z-index:2;
}

＆＃13;

<ul id="left" class='column'>
  <li><a href="ver.php">Home</a></li>
  <li><a href="#">Bijutaria</a>
    <ul>
      <li><a href="pulseiras.php">Pulseiras</a>  </li>
      <li><a href="fios.php">Fios</a>  </li>
    </ul>
  </li>
  <li><a href="#">Perfumes</a> 
    <ul>
      <li><a href="prfh.php">Homem</a></li>
      <li><a href="prfm.php">Mulher</a></li>
    </ul>
  </li>   
  <li><a href="#">Inserir</a>
    <ul>
      <li><a href="#">Perfumes</a>
        <ul>
          <li><a href="insrph.php">Homem</a></li>
          <li><a href="insrpm.php">Mulher</a></li>
        </ul>
      </li>
      <li><a href="#">Bijutaria</a>
        <ul>
          <li><a href="insrp.php">Pulseiras</a></li>
          <li><a href="insrf.php">Fios</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 3

试试这个

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul >
  <li><a href="ver.php">Home</a></li>
  <li><a href="#">Bijutaria</a>
  <ul>
    <li><a href="pulseiras.php">Pulseiras</a>  </li>
    <li><a href="fios.php">Fios</a>  </li>
  </ul>
    </li>
  <li><a href="#">Perfumes</a> 
    <ul>
      <li><a href="prfh.php">Homem</a></li>
      <li><a href="prfm.php">Mulher</a></li>
    </ul>
    <li><a href="#">Inserir</a>
    <ul>
      <li><a href="#">Perfumes</a>
      <ul>
        <li><a href="insrph.php">Homem</a></li>
        <li><a href="insrpm.php">Mulher</a></li>
      </ul>
        </li>
      <li><a href="#">Bijutaria</a>
      <ul>
        <li><a href="insrp.php">Pulseiras</a></li>
        <li><a href="insrf.php">Fios</a></li>
      </ul>
        </li>
    </ul>
  </li>
</ul>

下拉菜单不起作用

3 个答案: