Html 如何给我的导航栏两个面？

我有一个带有此代码的导航栏

*{
边际：0px；
填充：0px；
}
#bs-example-navbar-collapse-1 ul{
列表样式：无；
}
#bs-example-navbar-collapse-1ulli{
宽度：150px；
线高：50px；
文本对齐：居中；
浮动：左；
颜色：灰色；
字体大小：14px；
位置：相对位置；
}
#bs-example-navbar-collapse-1 ul{
显示：无；
}
#bs-example-navbar-collapse-1ulli:hover>ul{
显示：块；
}
#bs-example-navbar-collapse-1 ul{
左边距：150像素；
顶部：0px；
位置：绝对位置；
}

切换导航


苹果

*{
边际：0px；
填充：0px；
}
#bs-example-navbar-collapse-1 ul{
列表样式：无；
}
#bs-example-navbar-collapse-1ulli{
宽度：150px；
线高：50px；
文本对齐：居中；
浮动：左；
颜色：灰色；
字体大小：14px；
位置：相对位置；
}
#bs-example-navbar-collapse-1 ul{
显示：无；
}
#bs-example-navbar-collapse-1ulli:hover>ul{
显示：块；
宽度：600px；
浮动：左；
}
#bs-example-navbar-collapse-1 ul{
左边距：150像素；
顶部：0px；
位置：绝对位置；
}
#bs-example-navbar-collapse-1 ul li{
宽度：自动；
线高：50px；
文本对齐：左对齐；
浮动：无；
颜色：灰色；
字体大小：14px；
位置：相对位置；
}
#bs-example-navbar-collapse-1 ul li：悬停>ul div{
宽度：33%；
浮动：左；
}
氢{
文本对齐：左对齐；
}

切换导航


苹果

标题






标题





标题

是的，它现在确实起作用了，但我不能选择什么是左和右我的目标是，我可以说“苹果iPhone左”、“苹果平板电脑中”或“苹果iPod右”。它不起作用，实际上把它搞砸了，但我已经改变了方向