Ruby 添加下拉菜单更改了导航栏上链接的顺序和其他格式
我需要一些帮助，弄清楚为什么添加下拉菜单会改变导航栏上按钮的顺序 我添加了一个下拉菜单，当用户按照w3schools上的“CSS下拉”指南悬停在按钮上时，该菜单将打开 不管出于什么原因，实现这段代码重新排列了导航栏上的按钮。它过去包括关于我->车间产品->联系我们。现在，是关于我->联系我们->车间产品 我回去检查CSS是否有任何覆盖代码，但找不到任何内容 我还注意到按钮的类别从一个Ruby 添加下拉菜单更改了导航栏上链接的顺序和其他格式,ruby,Ruby,我需要一些帮助，弄清楚为什么添加下拉菜单会改变导航栏上按钮的顺序 我添加了一个下拉菜单，当用户按照w3schools上的“CSS下拉”指南悬停在按钮上时，该菜单将打开 不管出于什么原因，实现这段代码重新排列了导航栏上的按钮。它过去包括关于我->车间产品->联系我们。现在，是关于我->联系我们->车间产品 我回去检查CSS是否有任何覆盖代码，但找不到任何内容 我还注意到按钮的类别从一个更改为一个超链接（按钮文本的颜色改变了，并且有一个像普通超链接一样的下划线。我后来删除了这种格式，但这让我思考是什
<!DOCTYPE html>
<html>
<head>
<title>Saasapp</title>
<%= csrf_meta_tags %>
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag "https://js.stripe.com/v2/", type: 'text/javascript' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= tag :meta, :name => "stripe-key", :content => STRIPE_PUBLIC_KEY %>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class='container'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to root_path, class: "navbar-brand" do %>
<i class="fa fa-group"></i>
C. R. Communication Strategies
<% end %>
</div>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "About", about_path %></li>
<div class="dropdown">
<button class="dropbtn"><li><%= link_to "Offerings", offerings_path %></li></button>
<div class="dropdown-content">
<li><%= link_to "Public Speaking", pages_public_speaking_path %></li>
<li><%= link_to "Nonverbal Communication", nonverbal_path %></li>
<li><%= link_to "Group Dynamics", group_dynamics_path %></li>
<li><%= link_to "Intercultural Communication", intercultural_communication_path %></li>
<li><%= link_to "Editing", editing_path %></li>
<li><%= link_to "Interviewing", interviewing_path %></li>
<li><%= link_to "Business Etiquette", business_etiquette_path %></li>
<li><%= link_to "Business Writing", business_writing_path %></li>
</div>
</div>
<li><%= link_to "Contact Form", new_contact_path %></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container flash-container">
<% flash.each do |type, msg| %>
<%= content_tag :div, msg, class: "alert alert-#{type}" %>
<% end %>
</div>
<%= yield %>
</body>
</html>
萨萨普
“条带密钥”：内容=>stripe\u PUBLIC\u key%>
切换导航
C.R.沟通策略
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'font-awesome-sprockets';
@import 'font-awesome';
//Typography Styles
h1, h2, h3 {
font-family: 'Open Sans', 'sans-serif'
}
// Background Gradient
.navbar, .home-callout {
//Gradient provided by @i_ghosh at uiGradients.com
background: #000046; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1CB5E0, #000046); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
//Nav Styles
}
.navbar {
border: none;
}
// Color of hyperlinks on navbar (Offerings)
.navbar a {
color:white;
&:hover {
color: white;
opacity: 0.75;
text-decoration:none;
}
}
.navbar-brand {
font-family: 'Open Sans', sans-serif;
font-weight: 800;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle {
border: 2px solid white;
&:hover, &:focus {
background-color: #1CB5E0;
}
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: white;
padding: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
// Home Page Styles
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
color:white;
&:hover {
color: white;
opacity: 0.75;
}
}
// Margin between navbar and rest of the page
.home-signup-links {
margin-top: 05px;
}
// Styles for upper text and image on home page
.header-box {
font-family: 'Montserrat',sans-serif !important;
position: relative;
margin-top: 50px;
padding: 0;
}
.header-box h1 {
display: inline-block;
line-height: 40px;
}
.header-box img {
display: inline-block;
position: absolute;
top: 8px;
margin-left: 750px;
border-radius: 50%;
width: 500px;
}
//Large header across center of the page
.text-upper {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
width: 100%;
display: block;
box-sizing: border-box;
line-height: 1.3 !important;
margin: 60px 0 20px 0;
}
//Style for second header
.paragraph-upper {
font-size: 24px;
font-weight: 400;
width: 100%;
display: block;
box-sizing: border-box;
line-height: 1.3 !important;
margin: 0px 0 60px 0;
}
.button {
width: 30%;
padding-left: 190px;
font-weight: bold;
}
// This is just buffer to push the page down
.button p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-bottom: 100px;
}
.lower-page {
background-color: #efefef;
width: 100%;
}
.lower-page-content {
font-family: 'Montserrat',sans-serif !important;
padding-left: 40px;
}
.lower-heading {
font-size: 26px;
font-weight: 700;
}
.lower-paragraph {
padding-bottom: 30px;
}
.home-callout{
color:white;
margin-top: -20px;
padding-top: 0px;
padding-bottom: 0px;
}
.flash-container {
position: absolute;
width: 100%;
}
.alert-notice, .alert-alert {
text-align: center;
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
margin-top: -14px;
}
.class {
margin-left: auto;
margin-right: auto;
width: 50%;
}
//About Me
.about-image {
display: block;
width: 50%;
margin-top: 20;
margin-left: auto;
margin-right: auto;
}
// Offerings Page
.row-fluid {
text-align:center;
width: 100%;
*zoom: 1;
}
.header {
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 32px;
color: #000;
font-weight: bold;
display: block;
text-rendering: auto;
line-height: 1.3 !important;
margin: 0 0 .75em 0 !important;
padding: 0;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
//Horizantal Line Style
hr {
width: 50%;
border-top: 1px solid #8c8b8b;
}
.top-paragraph {
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 16px;
text-align: center;
}
.offerings-row {
width: 100%;
}
.course-image {
width: 400px;
height: 300px;
padding-right: 20px;
}
.blue-header {
font-family: 'Open Sans',Arial,sans-serif !important;
color: #075dab;
font-weight: bold;
font-size: 20px;
text-align: left;
padding-right: 20px;
margin: 5px;
}
.offerings-info {
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 16px;
text-align: left;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
margin: 5px;
}
// Public Speaking
.workshop-image {
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.course-summary {
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 16px;
text-align: left;
text-align: center;
}
/*
*这是一个清单文件，将被编译成application.css，其中将包含所有文件
*如下所列。
*
*此目录中的任何CSS和SCSS文件、lib/assets/stylesheets、vendor/assets/stylesheets、，
*或者任何插件的供应商/资产/样式表目录都可以在这里使用相对路径引用。
*
*您可以自由地将应用程序范围的样式添加到此文件，它们将显示在
*已编译的文件，因此您在此处添加的样式优先于在任何其他CSS/SCS中定义的样式
*此目录中的文件。此文件中的样式应添加在最后一个require_*语句之后。
*通常，最好按照样式范围创建一个新文件。
*
*=需要一棵树。
*需要自己
*/
@进口“自举链轮”；
@导入“引导”；
@导入“链轮”；
@导入“字体真棒”；
//排版风格
h1，h2，h3{
字体系列：“开放式Sans”、“无衬线”
}
//背景梯度
.navbar、.home标注{
//梯度由@i_ghosh在uiGradients.com上提供
背景：#000046；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#1CB5E0，#000046）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#1CB5E0，#000046）；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
//导航样式
}
navbar先生{
边界：无；
}
//导航栏上超链接的颜色（产品）
纳瓦尔先生{
颜色：白色；
&：悬停{
颜色：白色；
不透明度：0.75；
文字装饰：无；
}
}
.navbar品牌{
字体系列：“开放式Sans”，无衬线；
字号：800；
}
.navbar默认值.navbar切换.图标栏{
背景色：白色；
}
.navbar默认值.navbar切换{
边框：2倍纯白；
&：悬停，&：聚焦{
背景色：#1CB5E0；
}
}
/*下拉按钮*/
.dropbtn{
背景色：透明；
颜色：白色；
填充：16px；
边界：无；
光标：指针；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
/*悬停时显示下拉菜单*/
.dropdown:hover.dropdown内容{display:block；}
//主页样式
.navbar默认值.navbar品牌，
.navbar默认值.navbar nav>li>a{
颜色：白色；
&：悬停{
颜色：白色；
不透明度：0.75；
}
}
//导航栏和页面其余部分之间的边距
.主页注册链接{
利润上限：05px；
}
//主页上上部文本和图像的样式
.标题框{
字体系列：“蒙特塞拉特”，无衬线！重要；
位置：相对位置；
边缘顶部：50px；
填充：0；
}
.标题框h1{
显示：内联块；
线高：40px；
}
.标题框img{
显示：内联块；
位置：绝对位置；
顶部：8px；
左边距：750px；
边界半径：50%；
宽度：500px；
}
//页面中央的大标题
.上文本{
字体大小：32px；
字体大小：粗体；
文本转换：大写；
宽度：100%；
显示：块；
框大小：边框框；
线高：1.3！重要；
利润率：60px 0 20px 0；
}
//第二个标题的样式
.上段{
字体大小：24px；
字体大小：400；
宽度：100%；
显示：块；
框大小：边框框；
线高：1.3！重要；
边际：0px 0 60px 0；
}
.按钮{
宽度：30%；
左侧填充：190px；
字体大小：粗体；
}
//这只是将页面向下推的缓冲区
.按钮p{
显示：块；
边距块开始：1em；
边缘块端部：1米；
边距内联开始：0px；
边距内联端：0px；
填充底部：100px；
}
.下页{
背景-