Блог

Главная - Вопросы по программированию - Подменю CSS не отображается в главном меню

Подменю CSS не отображается в главном меню

#javascript #html #css #menu

#javascript #HTML #css #меню

Вопрос:

У меня есть мобильный сайт, над которым я работаю. Я, наконец, получил JS-код для отображения подменю при нажатии, а не при наведении курсора мыши. Теперь у меня возникли проблемы с размещением подменю непосредственно под главным меню. Я исследовал все, что мог, обнаружил, что мне нужно сделать положение главного меню «относительным», а подменю «абсолютным». Я ходил кругами, пытаясь понять, как это применить, но безуспешно. Код немного запутанный, поэтому прошу прощения. Я просто новичок.

HTML

 <html>
<head>

<link rel="stylesheet" href="phone.css">
</head>
<body>

<img class="smlogo" alt="" src="clearlogo123.png">

<div id="menuclick" class="smenu_div">
    <ul>
            <li><a href="#">Menu</a>
</div>
<div id="hiddenMenu" class="smenu_div" style="display: none;">
                <ul>
                    <li><a href="#">1Submenu</a></li>
                    <li><a href="#">2Submenu</a></li>
                </ul>
</div>

            </li>


    </ul>   

<br>



<script>

var hidden = true;
document.getElementById('menuclick').onclick = function () {
    document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
    hidden = !hidden;
};
</script>
</body></html>

CSS

 .smenu_div ul
{
    padding:0px;
    margin-top:35px; 
    margin-right:40px;
    font-family:georgia;
    font-size:60px;
    color:#ffffff;
    list-style:none;
    text-indent:15px;
    text-align:center; 
    width:35%;
    float:right;
    overflow:hidden;
    position: relative;
    display: block;
}

.smenu_div ul li
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background:#000000;
    line-height:justified;
    border-bottom:1px solid #333;
    margin-top: 10px;
    z-index: 50;
    position:relative;
}
.smenu_div li ul
{ 
position:absolute;
float:right; 
}

.smenu_div ul li a
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-decoration:none;
    color:#ffffff;
    display:block;
    position:relative;
}
.smenu_div ul li a:hover
{
    color:#000000;
    background:#fdff30;
}
.smenu_div ul li#active
{
    position:relative;
    color:#000000;
    background:#fdff30;
}

Ответ №1:

Попробуйте изменить свой HTML, чтобы у вас не было div, заканчивающегося в середине первого li.

Затем, если вы введете идентификатор непосредственно в скрытое меню, вы можете использовать javascript для непосредственного скрытия / отображения скрытого меню

http://jsbin.com/fexazihe/1/edit?html ,css, js, вывод

HTML

 <body>
<img class="smlogo" alt="" src="clearlogo123.png">

<div id="menuclick" class="smenu_div">
    <ul>
      <li>
        <a href="#">Menu</a>
        <ul id='hiddenMenu'>
           <li><a href="#">1Submenu</a></li>
           <li><a href="#">2Submenu</a></li>
         </ul>
        </li>
    </ul>   
</div>
</body>

CSS

 .smenu_div ul
{
    padding:0px;
    margin-top:35px; 
    margin-right:40px;
    font-family:georgia;
    font-size:60px;
    color:#ffffff;
    list-style:none;
    text-indent:15px;
    text-align:center; 
    width:35%;
    overflow:hidden;
    position: relative;
    display: block;
}

.smenu_div ul li
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0);
    line-height:justified;
    border-bottom:1px solid #333;
    margin-top: 10px;
    z-index: 50;
    position:relative;
}


/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{ 
  display: none;
  position: relative;
  width: 100%;
  background: transparent;
}

.smenu_div ul li a
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-decoration:none;
    color:#ffffff;
  background: #000000;
    display:block;
    position:relative;
}
.smenu_div ul li a:hover
{
    color:#000000;
    background:#fdff30;
}
.smenu_div ul li#active
{
    position:relative;
    color:#000000;
    background:#fdff30;
}

JS

 <script>
    var hidden = true;
    document.getElementById('menuclick').onclick = function () {
        document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
        hidden = !hidden;
    };
</script>

Комментарии:

1. Спасибо. Я мог бы никогда ничего не сделать без помощи таких людей, как вы. Я ценю это. Еще раз спасибо, что нашли время помочь обучающемуся «программисту».