如何为根据网页布局激活的响应式主题编写特定的 CSS 代码？

Question

这是我网站的link。

虽然我已经设法修改了我网站的大部分 CSS，但菜单栏在桌面模式下看起来很整洁。但是，当您在移动视图中查看我的网站时，菜单栏看起来很难看，就好像它是用纯 HTML 编写的一样。我试图弄清楚使用 Chrome 开发人员工具在 CSS 中修改什么，但我发现那里没有运气。此外，在菜单栏中，有一个名为 CS / IT 的菜单，其中有一个名为 Program Implementations 的子菜单，除非 CS / IT被点击了，我该如何处理？

这是导航菜单的 CSS 代码：

.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
display: inline;
}

@media screen and (min-width: 600px)
.main-navigation ul.nav-menu, .main-navigation div.nav-menu>ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}

.main-navigation ul.nav-menu, .main-navigation div.nav-menu>ul {
display: none;
}

@media screen and (min-width: 600px)
.main-navigation ul {
margin: 0;
text-indent: 0;
}

ol, ul {
list-style: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
user agent stylesheetul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Inherited from div.menu-default_menu-container

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
Inherited from nav#site-navigation.main-navigation

.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
Inherited from header#masthead.site-header

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
Inherited from div#page.hfeed.site

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
Inherited from body.home-page.home.page.page-id-4.page-template.page-template-page-templatesfull-width-php.logged-in.admin-bar.custom-background.siteorigin-panels.siteorigin-panels-home.full-width.custom-font-enabled.single-author.js.myatu_bgm_body.customize-support.su-other-shortcodes-loaded

body.custom-font-enabled {
font-family: "Open Sans",Helvetica,Arial,sans-serif;
}

body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica,Arial,sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}

body {
line-height: 1;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
www.cyberfosters.com/media="screen"
body {
font-family: "Roboto",arial,sans-serif;
}
Inherited from html

html {
font-size: 87.5%;
}

html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

Answer 1

做到这一点的唯一方法是通过 javascript/jquery，仅使用 css 跟踪点击事件是不可能的

Answer 2

我这样做的方式是我display: none;原始桌面菜单，当它进入移动布局时，我制作另一个“Mobile”菜单，@987654322 @ 在桌面布局中，并在布局进入较小的 "Mobile" 布局时给它一个 display: whatever;。 因此，最重要的是，桌面布局和移动布局有 2 个不同的菜单，可根据您显示它们的位置打开和关闭。