Html 如何同时拥有水平和垂直导航栏_Html_Css

Html 如何同时拥有水平和垂直导航栏

html css

Html 如何同时拥有水平和垂直导航栏,html,css,Html,Css,我怎样才能使它既有水平导航栏又有垂直导航栏？我是一个设计方面的新手，我试图找出我做错了什么，但我不知道如何在多个链接上使用CSS <body> <div class="horizontallinks"> <ul> <li> link1 </li> <li>link 2</li> <li>link 3</li> <li>

我怎样才能使它既有水平导航栏又有垂直导航栏？我是一个设计方面的新手，我试图找出我做错了什么，但我不知道如何在多个链接上使用CSS

<body>
  <div class="horizontallinks">
    <ul>
      <li> link1 </li>
      <li>link 2</li>
      <li>link 3</li>
      <li>
        <link 4</div>
        <div class="verticallinks">
          <ui>
            <li>link a </li>
            <li> link b</li>
            <li> link c </li>
        </div>
    </ul>
</body>

.horizontallinks{
位置：固定；
列表样式类型：无；
利润上限：70像素；
左边距：300px；
填充：0；
字号：18px；
溢出：隐藏；
背景色：白色；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.verticallinks{
位置：固定；
列表样式类型：无；
填充：0；
字号：18px；
左边距：45像素；
页边顶部：165px；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}



链接1
链接2
链接3
链接4


链接a
链接b
链接c

试试这个

<body>
    <h2 class="horizontallinks">
        <ui class="make-inline"> 
            <li>link1</li>
            <li>link 2</li>
            <li>link 3</li>
            <li>link 4</li>
        </ul>
    </h2>
    <div class="body-wrapper">
        <div class="side-bar"> 
            <ui> 
                <li>link a</li>
                <li>link b</li>
                <li>link c</li> 
            </ul>
        </div>
        <div class="body-style">
            <!-- Body content -->
        </div>
    </div>
</body>


链接1
链接2
链接3
链接4

链接a
链接b
链接c

为大屏幕设备创建水平菜单，为小屏幕设备创建垂直菜单不是更好吗

（mdn链接）可用于此

var close=document.getElementsByClassName（“close”）；
var menu=document.getElementById（“菜单”）；
对于（变量i=0；i


正文{
保证金：0；
}
#菜单{
显示：块；
边界半径：5px；
背景色：#496D89；
高度：50px；
}
#菜单ul{
字号：0em；
显示：块；
身高：100%；
字号：2rem；
保证金：0自动；
填充：0；
列表样式：无；
}
#菜单ulli{
线高：1.5em；
显示：内联块；
填充：0.2米；
身高：100%；
}
#菜单：悬停{
背景色：#294F6D；
边界半径：5px；
}
#菜单ulli a{
颜色：白色；
}
#菜单ulli a：参观{
颜色：#F9CEE7；
}
#菜单，关闭{
显示：无；
}
@介质（最大宽度：600px）{
#菜单{
位置：绝对位置；
显示：内联块；
宽度：300px；
高度：自动；
过渡：左1秒；
}
#菜单ul{
宽度：自动；
}
#菜单ulli{
显示：块；
}
#菜单，关闭{
显示：首字母；
位置：绝对位置；
右：0；
排名：0；
宽度：50px；
高度：50px；
字号：2rem；
边界半径：5px；
边界：无；
背景色：#123652；
颜色：白色；
光标：指针；
文本阴影：2px 2px黑色；
}
.关闭：活动{
背景色：#042037；
文本阴影：无；
}
}















X
请指定您的问题。您想要一个下拉列表，其中垂直导航是水平导航元素的子元素，还是有单独的导航？试着给出一个你想要达到的目标的例子。你能为这个做一把小提琴来证明你的要求吗？
<body>
    <h2 class="horizontallinks">
        <ui class="make-inline"> 
            <li>link1</li>
            <li>link 2</li>
            <li>link 3</li>
            <li>link 4</li>
        </ul>
    </h2>
    <div class="body-wrapper">
        <div class="side-bar"> 
            <ui> 
                <li>link a</li>
                <li>link b</li>
                <li>link c</li> 
            </ul>
        </div>
        <div class="body-style">
            <!-- Body content -->
        </div>
    </div>
</body>